import React, { useEffect, useState } from 'react';
import { fetchArticlesListAPI, fetchChannelsListAPI } from '@/API/notifyAPI';
import { Article, Channel } from '@/type/NotifyType';
import { Tabs } from 'antd-mobile';
import NotifyItem from '@/views/Notify/components/NotifyItem';
import './Notify.scss';


const Notify = () => {
  // 频道列表
  const [channel, setChannel] = useState<Channel[]>([]);
  // 文章列表
  const [notifyList, setNotifyList] = useState<Article[]>([]);
  // 当前激活项的ID
  const [activeKey, setActiveKey] = useState<string>('6');
  // 时间戳
  const [timestamp, setTimestamp] = useState<string>( '1720521285990');
  /**
   *@description 获取频道列表的回调函数
   */
  const fetchChannelsList = async () => {
    try {
      const { data } = await fetchChannelsListAPI();
      setChannel(data.channels);
    } catch (error: any) {
    }
  };
  /**
   *@description 获取文章列表的回调函数
   */
  const fetchArticlesList = async () => {
    try {
      const { data: { results, pre_timestamp } } = await fetchArticlesListAPI(activeKey, timestamp);
      setNotifyList(results);
      setTimestamp(pre_timestamp);
    } catch (error: any) {

    }
  };

  const changeActiveKey = (activeKey: string) => {
    setActiveKey(activeKey);
  };

  useEffect(() => {
    fetchChannelsList();
  }, []);

  useEffect(() => {
    fetchArticlesList();
  }, [activeKey]);

  return (
    <div className="notify">
      <Tabs activeKey={activeKey} onChange={changeActiveKey}>
        {
          channel.map((channel) => {
            return (
              <Tabs.Tab title={channel.name} key={channel.id}>
                {notifyList.map(item => <NotifyItem notify={item} key={item.art_id}></NotifyItem>)}
              </Tabs.Tab>
            );
          })
        }
      </Tabs>
    </div>
  );
};

export default Notify;